<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>设备管理</title>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
    <!-- 通知栏样式 -->
    <link th:href="@{/asserts/css/notificationBar.css}" rel="stylesheet">
</head>

<!-- 页面加载完毕就同步通知栏，如果有新通知要及时通知用户 -->
<body onload="syncNotify()">
<!-- 引入顶部栏 -->
<div th:replace="common/bar::topbar"></div>

<div class="container-fluid">
    <div class="row">
        <!-- 引入通知栏 -->
        <div th:replace="common/bar::NotificationBar"></div>

        <!-- 引入侧边栏 -->
        <div th:replace="common/bar::#sidebar(activeUri='devman')"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h2 th:if="${session.login_usr_role == 0}">设备管理</h2>

            <!-- 统计信息 -->
            <h5 style="color: green"><th:block th:text="'共有' + ${device_statistics.nowTotal} + '台设备，' + '今日更新了' + ${device_statistics.nowUpdated} + '台设备'" /></h5>

            <!--/* 条件查询 */-->
            <div>
                <table class="table table-striped table-sm">
                    <thead>
                    <tr align="center">
                        <th colspan="3">
                            高级条件查询
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr align="center">
                        <td>
                            设备范围：
                            <input type="text" name="devNr" th:value="${search_device != null && search_device.devNr != null} ? ${search_device.devNr}"
                                   oninput="value=value.replace(/[^\d]/g,'')" size="8">
                            -
                            <input type="text" name="devNrEnd" th:value="${search_device != null && search_device.devNrEnd != null} ? ${search_device.devNrEnd}"
                                   oninput="value=value.replace(/[^\d]/g,'')" size="8">
                        </td>
                        <td>
                            设备名称：
                            <input type="text" name="name" th:value="${search_device != null && search_device.name != null} ? ${search_device.name}">
                        </td>
                        <td>
                            系统版本号：
                            <input type="text" name="sysVersion" th:value="${search_device != null && search_device.sysVersion != null} ? ${search_device.sysVersion}">
                        </td>
                    </tr>
                    <tr align="center">
                        <td>
                            MAC地址：
                            <input type="text" name="mac" th:value="${search_device != null && search_device.mac != null} ? ${search_device.mac}">
                        </td>
                        <td>
                            内网IP：
                            <input type="text" name="intranetIp" th:value="${search_device != null && search_device.intranetIp != null} ? ${search_device.intranetIp}">
                        </td>
                        <td>
                            外网IP：
                            <input type="text" name="extranetIp" th:value="${search_device != null && search_device.extranetIp != null} ? ${search_device.extranetIp}">
                        </td>
                    </tr>
                    <tr align="center">
                        <td colspan="2">
                            <a class="btn btn-sm btn-primary"
                               th:onclick="'exportExcelFile(1, ' +  ${device_pages.pages} + ')'">导出本页结果到Excel文件</a>
                        </td>
                        <td>
                            <a class="btn btn-sm btn-success"
                               th:onclick="'showPage(1, ' +  ${device_pages.pages} + ')'">立即查询</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 设备列表 -->
            <div class="table-responsive" style="overflow:auto;">
                <table class="table table-striped table-sm" style='white-space: nowrap'>
                    <thead>
                    <tr align="center">
                        <th>操作</th>
                        <th>设备号</th>
                        <th>设备名</th>
                        <th>系统版本</th>
                        <th>MAC地址</th>
                        <th>存储空间</th>
                        <th>内网IP</th>
                        <th>外网IP</th>
                        <th>电池信息</th>
                        <th>网络类型</th>
                        <th>内存空间</th>
                        <th>uuid</th>
                        <th>IMEI</th>
                        <th>序列号</th>
                        <th>型号</th>
                        <th>相同IP数量</th>
                        <th>运行游戏</th>
                        <th>扩展字符串</th>
                        <th>扩展数值</th>
                        <th>更新时间</th>
                        <th>管理员</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="dev : ${device_pages.records}" align="center">
                        <td>
                            <button href="#" class="btn btn-sm btn-danger deleteBtn"
                                    th:onclick="'return deviceRemove(' + ${dev.id} + ')'">删除</button>
                        </td>
                        <td th:text="${dev.sdevNr}"></td>
                        <td th:text="${dev.name}"></td>
                        <td th:text="${dev.sysVersion}"></td>
                        <td th:text="${dev.mac}"></td>
                        <td th:text="${dev.storage}"></td>
                        <td th:text="${dev.intranetIp}"></td>
                        <td th:text="${dev.extranetIp}"></td>
                        <td th:text="${dev.battery}"></td>
                        <td th:text="${dev.netType}"></td>
                        <td th:text="${dev.memory}"></td>
                        <td th:text="${dev.uuid}"></td>
                        <td th:text="${dev.imei}"></td>
                        <td th:text="${dev.serialNr}"></td>
                        <td th:text="${dev.model}"></td>
                        <td th:text="${dev.nrSameIp}"></td>
                        <td th:text="${dev.runGame}"></td>
                        <td th:text="${dev.extenString}"></td>
                        <td th:text="${dev.extenInt}"></td>
                        <td th:text="${#dates.format(T(com.chenu.gamscriptman.utils.TimeUtils).unixStamp2javaStamp(dev.uptime), 'yyyy-MM-dd HH:mm')}"></td>
                        <td th:text="${dev.admin.username}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <!-- 分组查看 -->
                <table align="left" width="27%">
                    <tr>
                        <td>
                            <select class="form-control" onchange="return devGroupChange()" id="dev_group_select">
                                <option th:selected="${search_device != null} ? ${search_device.groupNr == group_nr}"
                                        th:value="${group_nr}" th:each="group_nr : ${device_group_nrs}"
                                        th:text="${group_nr == '>' ? '不分组' : group_nr}">
                                </option>
                            </select>
                        </td>
                    </tr>
                </table>
                <!-- 分页控制区域 -->
                <table align="right" width="73%">
                    <tr th:if="${device_pages.pages == 0}">
                        <td align="center">
                            [没有数据]
                        </td>
                    </tr>
                    <tr th:if="${device_pages.pages > 0}">
                        <!-- 选择一页能显示多少 -->
                        <td align="center">
                            请选择分页大小[默认10/最大500]
                            <input type="text" name="page_size"
                                   oninput="value=value.replace(/[^\d]/g,'')" th:value="${device_pages.size}" size="3">
                            <button th:onclick="'showPage(1, ' +  ${device_pages.pages} + ')'">立即生效</button>
                        </td>
                        <td align="center">
                            <th:block th:text="'第' + ${device_pages.current} + '/' + ${device_pages.pages} + '页'"></th:block>
                        </td>
                        <th:block th:if="${device_pages.current > 1}">
                            </td>
                            <td align="center">
                                <a href="javascript:void(0)" th:onclick="'showPage(1' + ', ' +  ${device_pages.pages} + ')'">[首页]</a>
                            </td>
                            <td align="center">
                                <a href="javascript:void(0)" th:onclick="'showPage(' + ${device_pages.current - 1} + ', ' +  ${device_pages.pages} + ')'">[上一页]</a>
                            </td>
                        </th:block>

                        <td align="center">
                            <!-- 动态显示条 -->
                            <th:block th:each="i : ${#numbers.sequence(device_pages.dynamicStart, device_pages.dynamicEnd)}">
                                <th:block th:if="${i == device_pages.current}" th:text="'[' + ${i} + ']'"></th:block>
                                <a th:if="${i != device_pages.current}" href="javascript:void(0)" th:onclick="'showPage(' + ${i} + ', ' +  ${device_pages.pages} + ')'">
                                    [<th:block th:text="${i}"></th:block>]
                                </a>
                            </th:block>
                        </td>

                        <th:block th:if="${device_pages.current < device_pages.pages}">
                            <td align="center">
                                <a href="javascript:void(0)" th:onclick="'showPage(' + ${device_pages.current + 1} + ', ' +  ${device_pages.pages} + ')'">[下一页]</a>
                            </td>
                            <td align="center">
                                <a href="javascript:void(0)" th:onclick="'showPage(' + ${device_pages.pages} + ', ' +  ${device_pages.pages} + ')'">[尾页]</a>
                            </td>
                        </th:block>
                    </tr>
                </table>
                <br>
                <br>
                <br>
            </div>
        </main>
    </div>
</div>

<!-- 引入公共的js  -->
<div th:replace="common/js::js"></div>
<!-- 自定义的js -->
<script type="text/javascript" th:src="@{/asserts/js/common.js}" ></script>
<script type="text/javascript" th:src="@{/asserts/js/device.js}" ></script>

</body>
</html>